<template>
    <div class="menu-container acea-row row-column row-middle" @click="jumpPage">
        <img :src="icon" alt="icon" class="icon">
        <div class="name">{{name}}</div>
    </div>
</template>

<script>
    export default {
        name: "Menu",
        props:{
            icon:{
                type:String,
                required: true
            },
            name:{
                type:String,
                required: true
            }
        },
        data() {
            return {}
        },
        methods:{
            jumpPage(){
                this.$emit('jump')
            }
        }
    }
</script>

<style scoped lang="scss">
    .menu-container{
        width:165px;
        height:165px;
        background:rgba(255,255,255,1);
        border-radius:8px;
        .icon{
            display: block;
            width: 44px;
            height: 44px;
            margin-top: 39px;
        }
        .name{
            font-size:16px;
            font-weight:500;
            color:rgba(66,69,95,1);
            margin-top: 25px;
        }
    }
</style>
